<%@ page  contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>

<%@include file="../common/common-head.jsp"%>

<body>

    <!-- begin #content -->
    <div id="content" class="content">
        <c:set var="listName" value="用户管理" />
        <%@include file="../common/common-breadcrumb.jsp"%>

        <!-- begin row -->
        <div class="row">
            <!-- begin col-6 -->
            <div class="col-xl-8">
                <!-- begin panel -->
                <div class="panel panel-inverse" data-sortable-id="table-basic-1">
                    <c:set var="panelName" value="用户管理" />
                    <%@include file="../common/common-panel-heading.jsp"%>

                    <!-- begin panel-body -->
                    <div class="panel-body">
                        <form class="form-inline" action="/" method="POST" style="margin-bottom: 10px;">
                            <div class="form-group m-r-10">
                                <input type="text" class="form-control" id="userName" placeholder="用户名" value="${userName}" />
                            </div>
                            <button type="button" class="btn btn-sm btn-primary m-r-5" id="search">
                                <i class="fa fa-search"></i>
                                搜索
                            </button>

                        </form>

                        <div class="alert alert-success fade show">
                            <span class="close" data-dismiss="alert">×</span>
                            <strong>注释事项!</strong><br/>
                            1、可以对用户进行授权

                        </div>

                        <div class="btn-group" style="margin-bottom: 10px;">
                            <button type="button" class="btn btn-sm btn-primary m-r-5" onclick="add()">
                                <i class="fa fa-plus-circle"></i>
                                新增
                            </button>
                            <button type="button" class="btn btn-sm btn-danger m-r-5" id="deleteAll">
                                <i class="fa fa-archive"></i>
                                删除
                            </button>
                            <button type="button" class="btn btn-sm btn-yellow m-r-5" onclick="openUpload()" >
                                <i class="fa fa-arrow-down"></i>
                                导入
                            </button>
                            <input type="file" name="file" id="file" style="display: none" onchange="uploadFile()">
                            <button type="button" class="btn btn-sm btn-green m-r-5" id="downLoadCurrentPage">
                                <i class="fa fa-arrow-up"></i>
                                导出当前页
                            </button>
                            <button type="button" class="btn btn-sm btn-pink m-r-5" onclick="window.location.href='${basePath}downLoadUserDataServlet'">
                                <i class="fa fa-arrow-up"></i>
                                导出全部
                            </button>
                        </div>

                        <!-- begin table-responsive -->
                        <div class="table-responsive">
                            <table class="table table-bordered m-b-0">
                                <thead>
                                <tr>
                                    <th>
                                        <div class="checkbox checkbox-css">
                                            <input type="checkbox" value="" id="ids" />
                                            <label for="ids">&nbsp;</label>
                                        </div>
                                    </th>
                                    <th>入库时间</th>
                                    <th>用户名</th>
                                    <th>密码</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${iPage.data}" var="user" varStatus="userStat">
                                <tr>
                                    <td class="with-checkbox">
                                        <div class="checkbox checkbox-css">
                                            <input type="checkbox" id="user_${user.id}" name="user" value="${user.id}" />
                                            <label for="user_${user.id}">&nbsp;</label>
                                        </div>
                                    </td>
                                    <td >${localDateTimeUtil.format(user.addTime,'yyyy-MM-dd HH:mm:ss')}</td>
                                    <td >${user.userName}</td>
                                    <td >${user.password}</td>
                                    <td class="with-btn" nowrap>
                                        <a href="javascript:void(0);" class="btn btn-sm btn-primary width-60 m-r-2" onclick="editById(${user.id})">
                                            <i class="fa fa-edit"></i> Edit
                                        </a>
                                        <a href="javascript:void(0);" class="btn btn-sm btn-danger width-80" onclick="deleteById(${user.id})">
                                            <i class="fa fa-archive"></i> Delete
                                        </a>
                                    </td>
                                </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <!-- end table-responsive -->

                        <%@include file="../common/common-pages.jsp"%>

                    </div>
                    <!-- end panel-body -->
                </div>
                <!-- end panel -->

            </div>
            <!-- end col-6 -->
        </div>
        <!-- end row -->
    </div>
    <!-- end #content -->
<!-- end page container -->

<%@include file="../common/common-script.jsp"%>

<script>
    var ctx = '${basePath}'

    function openUpload(){
        $("#file").trigger("click")
    }

    function uploadFile(){
        var formData=new FormData();
        formData.append("file",$('#file').prop('files')[0]);
        $.ajax({
            type:'POST',
            url:'/uploadUserData',
            data:formData,
            contentType: false,// 注意：让jQuery不要处理数据
            processData: false,// 注意：让jQuery不要设置contentType
            dataType:'json',
            success:function (res) {
                if(res == "1000"){
                    window.location.href=ctx+'user/list'
                }
            }
        });
    }

    function add(){
        window.location.href=ctx+'/user/add'
    }

    function deleteById(id){
        var ids = [id];
        delByIds(ids)
    }

    function editById(id){
        window.location.href=ctx+'/user/add?id='+id
    }

    function delByIds(ids){
        $.ajax({
            type:'post',
            url:ctx+'user/delete',
            data:JSON.stringify(ids),
            success:function(res){
                if(res == "1000"){
                    window.location.href=ctx+'user/list'
                }else{
                    swal({
                        title: '删除异常！',
                        text: '该信息不可删除!',
                        icon: 'error',
                        buttons: {
                            cancel: {
                                text: 'Cancel',
                                value: null,
                                visible: true,
                                className: 'btn btn-default',
                                closeModal: true,
                            },
                            confirm: {
                                text: 'Warning',
                                value: true,
                                visible: true,
                                className: 'btn btn-danger',
                                closeModal: true
                            }
                        }
                    });
                }
            }
        })
    }

    $(function(){
        $("#downLoadCurrentPage").click(function(){
            var ids = []
            $("input[name=user]").each(function(){
                ids.push($(this).val())
            })
            window.location.href=ctx+"downLoadUserDataServlet?ids="+ids.join(",")
        })

        $('#ids').click(function(){
            $("input[name='user']:checkbox").prop("checked",this.checked);
        })

        $("#deleteAll").click(function(){
            var ids = [];
            $(":checkbox[name='user']:checked").each(function() {
                ids.push($(this).val())
            });

            delByIds(ids)

        })

        $("#search").click(function(){
            var userName = $("#userName").val()

            window.location.href=ctx+'user/list?current=1'+"&userName="+userName

        })

    })

    function goTo(current){
        var userName="${userName!=null?userName:''}"
        if(userName!='' && userName!='error'){
            window.location.href=ctx+'user/list?current='+current+'&userName='+userName
        }else{
            window.location.href=ctx+'user/list?current='+current
        }
    }
</script>

</body>
</html>
